<template>
<div class="center slide_list_container" scroll="no">
    <div class="slide_list_title clearfix" :style="{ color:data.titleColor }"> <i class="iconfont left" :class="data.icon"></i> {{ data.title }}</div>
    <ul class="clearfix swiper-wrapper">
        <li class="swiper-slide" v-for="(item,index) in data.slideData" :key="index">
            <img :src="item.src" alt="">
            <span class="food_name">{{item.name}}</span>
        </li>
    </ul>
</div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
    props: ['data'],
    mounted() {
        var swiper = new Swiper('.slide_list_container', {
            slidesPerView: 2.8,
            autoplay: 100,
            paginationClickable: true,
            spaceBetween: 30,
            freeMode: true
        });
    },
    methods: {},
    components: {

    }
}
</script>

<style lang="scss">
.slide_list_container {
    overflow: hidden;
    margin-top: 0.4rem;
    .slide_list_title {
        text-align: left;
        font-size: 0.25rem;
        color: red;
        padding: 0.12rem 0;
        line-height: 1;

        i {
            font-size: 0.3rem;
            margin-right: 0.15rem;
            margin-top: -0.06rem;
            line-height: initial;
        }
    }

    li {
        float: left;
        /*width:150px;*/
        margin-right: 15px !important;

        img {
            width: 100%;
        }

        .food_name {
            display: block;
            padding: 0.06rem 0;
            font-size: 0.2rem;
        }
    }
}
</style>
